<template>
  <el-container class="app-container">
    <!-- 侧边栏 -->
    <el-aside width="250px" class="sidebar">
      <div v-if="isLoggedIn" class="sidebar-title">
        <div class="logo-container">
          <i class="el-icon-link logo-icon"></i>
        </div>
        <h2 class="gradient-title">学信链</h2>
        <div class="logo-badge">管理系统</div>
      </div>
      <div v-else class="sidebar-title">
        <div class="logo-container">
          <i class="el-icon-link logo-icon"></i>
        </div>
        <h2 class="gradient-title">学信链</h2>
        <div class="logo-badge">验证系统</div>
      </div>
      
      <!-- 登录状态下显示完整侧边栏 -->
      <el-menu
        v-if="isLoggedIn"
        :default-active="activeRoute"
        class="sidebar-menu"
        router
        background-color="#001529"
        text-color="#b3b3b3"
        active-text-color="#ffffff">
        
        <div class="menu-header">系统功能</div>
        
        <el-menu-item index="/dashboard" class="menu-item">
          <el-icon><i class="el-icon-data-analysis"></i></el-icon>
          <span>学信链仪表盘</span>
        </el-menu-item>
        
        <el-menu-item index="/students" class="menu-item">
          <el-icon><i class="el-icon-user"></i></el-icon>
          <span>学生信息管理</span>
        </el-menu-item>
        
        <el-menu-item index="/certificates" class="menu-item">
          <el-icon><i class="el-icon-document"></i></el-icon>
          <span>学信证书管理</span>
        </el-menu-item>
        
        <el-menu-item index="/verify" class="menu-item">
          <el-icon><i class="el-icon-check"></i></el-icon>
          <span>证书验证系统</span>
        </el-menu-item>
        
        <div class="menu-divider"></div>
        
        <!-- 用户信息与注销 -->
        <div class="user-panel">
          <div class="user-info-sidebar">
            <div class="user-avatar">
              <el-avatar :size="40" icon="el-icon-user"></el-avatar>
            </div>
            <div class="user-details">
              <div class="username">{{ username }}</div>
              <div class="user-role">管理员</div>
            </div>
          </div>
          
          <el-button type="danger" size="small" @click="handleLogout" class="logout-btn-sidebar">
            <i class="el-icon-switch-button"></i> 退出系统
          </el-button>
        </div>
      </el-menu>
      
      <!-- 未登录状态显示简化侧边栏，只有证书验证入口 -->
      <el-menu
        v-else
        :default-active="activeRoute"
        class="sidebar-menu"
        router
        background-color="#001529"
        text-color="#b3b3b3"
        active-text-color="#ffffff">
        
        <div class="menu-header">公共服务</div>
        
        <el-menu-item index="/verify" class="menu-item">
          <el-icon><i class="el-icon-check"></i></el-icon>
          <span>学信证书验证</span>
        </el-menu-item>
        
        <div class="menu-divider"></div>
        
        <div class="login-panel">
          <el-button type="primary" @click="handleLogin" class="login-btn-sidebar">
            <i class="el-icon-user"></i> 管理员登录
          </el-button>
        </div>
      </el-menu>
    </el-aside>
    
    <!-- 主要内容区域 -->
    <el-container class="main-container">
      <el-header class="main-header">
        <div class="header-title">
          <i class="el-icon-menu toggle-sidebar-icon"></i>
          <span>{{ getPageTitle }}</span>
        </div>
        <div class="header-tools">
          <span class="date-time">{{ currentDateTime }}</span>
        </div>
    </el-header>
      
    <el-main>
      <router-view></router-view>
    </el-main>
      
      <el-footer class="main-footer">
        <span>© {{ new Date().getFullYear() }} 学信链系统 - 版权所有</span>
      </el-footer>
    </el-container>
  </el-container>
</template>

<script>
import { computed, ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'

export default {
  name: 'App',
  setup() {
    const router = useRouter()
    const route = useRoute()
    const logoExists = ref(false)
    const currentDateTime = ref('')
    
    // 检查logo图片是否存在（可选，防止404错误）
    onMounted(() => {
      try {
        // 这里我们简单地假设logo可能不存在，设置为false
        // 实际项目中你应该确保logo图片存在
        logoExists.value = false
      } catch (e) {
        logoExists.value = false
      }
      
      // 更新当前时间
      updateDateTime()
      setInterval(updateDateTime, 60000) // 每分钟更新一次
    })
    
    // 更新当前时间的函数
    const updateDateTime = () => {
      const now = new Date()
      const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' }
      currentDateTime.value = now.toLocaleDateString('zh-CN', options) + ' ' + 
                              now.getHours().toString().padStart(2, '0') + ':' + 
                              now.getMinutes().toString().padStart(2, '0')
    }
    
    // 计算属性：当前登录状态
    const isLoggedIn = computed(() => {
      return localStorage.getItem('isLoggedIn') === 'true'
    })
    
    // 计算属性：当前用户名
    const username = computed(() => {
      return localStorage.getItem('username') || '管理员'
    })
    
    // 计算属性：当前活动路由
    const activeRoute = computed(() => {
      return route.path
    })
    
    // 计算属性：获取页面标题
    const getPageTitle = computed(() => {
      switch(route.path) {
        case '/dashboard': return '学信链仪表盘';
        case '/students': return '学生信息管理';
        case '/certificates': return '学信证书管理';
        case '/verify': return '证书验证系统';
        case '/login': return '管理员登录';
        default: return '学信链系统';
      }
    })
    
    // 处理注销
    const handleLogout = () => {
      // 清除所有登录相关的本地存储
      localStorage.removeItem('isLoggedIn')
      localStorage.removeItem('username')
      localStorage.removeItem('adminAddress')
      
      // 提示用户
      ElMessage.success('已安全退出系统')
      
      // 重定向到登录页
      router.push('/login')
    }
    
    // 处理登录
    const handleLogin = () => {
      router.push('/login')
    }
    
    return {
      isLoggedIn,
      username,
      activeRoute,
      getPageTitle,
      currentDateTime,
      handleLogout,
      handleLogin,
      logoExists
    }
  }
}
</script>

<style>
/* 全局样式重置 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#app {
  height: 100%;
}

.app-container {
  height: 100vh;
}

/* 侧边栏样式 */
.sidebar {
  background-color: #001529;
  color: #ffffff;
  height: 100vh;
  overflow-y: auto;
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
  transition: width 0.3s;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.sidebar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='rgba(255,255,255,0.03)' fill-rule='evenodd'/%3E%3C/svg%3E") repeat;
  z-index: 0;
}

.logo-container {
  margin-bottom: 10px;
  background: linear-gradient(45deg, #34b3f1, #6149cd);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.logo-icon {
  color: white;
  font-size: 20px;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.logo-text {
  color: white;
  font-weight: 700;
  font-size: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
  z-index: 1;
}

.sidebar-menu {
  border-right: none;
  width: 100%;
  flex: 1;
  position: relative;
  z-index: 1;
  background-color: transparent;
}

.menu-header {
  padding: 20px 20px 10px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  position: relative;
}

.menu-header::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 20px;
  width: 30px;
  height: 2px;
  background: linear-gradient(90deg, #1890ff, transparent);
  border-radius: 2px;
}

.menu-item {
  margin: 4px 8px;
  border-radius: 6px;
  transition: all 0.3s ease;
  overflow: hidden;
  position: relative;
}

.menu-item:hover {
  background-color: rgba(255, 255, 255, 0.08);
  transform: translateX(4px);
}

.menu-item i {
  margin-right: 12px;
  font-size: 18px;
  transition: all 0.3s;
}

.menu-item.is-active {
  background: linear-gradient(90deg, rgba(24, 144, 255, 0.1), transparent);
  border-left: 3px solid #1890ff;
}

.menu-item.is-active i {
  color: #1890ff;
}

.menu-item.is-active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background-color: #1890ff;
  box-shadow: 0 0 8px rgba(24, 144, 255, 0.8);
}

.menu-divider {
  margin: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
}

.menu-divider::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 20px;
  right: 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
}

/* 用户面板样式 */
.user-panel {
  padding: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background-color: rgba(0, 0, 0, 0.2);
  position: relative;
  margin-top: auto;
  backdrop-filter: blur(5px);
}

.user-info-sidebar {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.user-avatar {
  margin-right: 12px;
  position: relative;
}

.user-avatar::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background-color: #52c41a;
  border-radius: 50%;
  border: 2px solid #001529;
}

.user-details {
  display: flex;
  flex-direction: column;
}

.username {
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
}

.user-role {
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
  margin-top: 2px;
}

.logout-btn-sidebar {
  width: 100%;
  border-radius: 20px;
  background-color: rgba(245, 34, 45, 0.8);
  border: none;
  height: 36px;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.logout-btn-sidebar:hover {
  background-color: #ff4d4f;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(245, 34, 45, 0.4);
}

.logout-btn-sidebar i {
  margin-right: 8px;
  font-size: 14px;
}

.login-panel {
  padding: 16px;
  background-color: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(5px);
  margin-top: auto;
}

.login-btn-sidebar {
  width: 100%;
  border-radius: 20px;
  background: linear-gradient(135deg, #1890ff, #722ed1);
  border: none;
  height: 36px;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(24, 144, 255, 0.3);
}

.login-btn-sidebar:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
}

.login-btn-sidebar i {
  margin-right: 8px;
  font-size: 14px;
}

/* 主容器样式 */
.main-container {
  flex-direction: column;
  background-color: #f0f2f5;
}

.main-header {
  background-color: #ffffff;
  color: #303133;
  line-height: 60px;
  padding: 0 20px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-title {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 500;
}

.toggle-sidebar-icon {
  margin-right: 12px;
  font-size: 18px;
  cursor: pointer;
}

.header-tools {
  display: flex;
  align-items: center;
}

.date-time {
  font-size: 14px;
  color: #606266;
}

.main-footer {
  text-align: center;
  color: #909399;
  font-size: 14px;
  padding: 20px;
  border-top: 1px solid #e6e6e6;
  background-color: #ffffff;
}

.el-main {
  padding: 20px;
  overflow-y: auto;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .el-aside {
    width: 64px !important;
  }
  
  .logo-text, .menu-header {
    display: none;
  }
  
  .user-details, .user-role {
    display: none;
  }
  
  .menu-item span {
    display: none;
  }
}

/* 添加渐变标题样式 */
.gradient-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  background: linear-gradient(45deg, #34b3f1, #6149cd);
  background-size: 200% 200%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: gradient-animation 3s ease infinite;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  letter-spacing: 1px;
}

@keyframes gradient-animation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 修改侧边栏标题样式 */
.sidebar-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
  background: #001f3f;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* 标题下的徽章 */
.logo-badge {
  font-size: 12px;
  color: #34b3f1;
  margin-top: 5px;
  text-align: center;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
}
</style>
